<template>
        <div align="center">
    <h2>通用合同查看详情</h2><br>
    <table>
   
     <tr>
        <td>
      
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;"
            placeholder="请输入合同标题" clearable />
          </el-form-item>
      
        </td>
        <td>
          <el-form-item label="对方单位" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.unit" style="width: 300px;height: 40px;"
            placeholder="请输入对方单位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="对方负责人：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.personCharge" style="width: 300px;height: 40px;"
            placeholder="请输入对方负责人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同类型：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.contractType" style="width: 300px;height: 40px;"
            placeholder="请输入合同类别" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-date-picker v-model="form.dateofSigning" type="date" 
              placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人：" style="font-size: 20px;float: right;" prop="contractTitle">
            <el-input v-model="form.attn" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
            placeholder="请输入合同金额" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;" >
          <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;">
          <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
          
        </td>
      </tr>
      <tr >
        <td style="font-size: 20px;">合同文本(附件)：</td>
        <td>
          <el-button type="primary" 
          style="width: 150px;height: 50px;">选取文件</el-button>
          <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
        </td>
      </tr>
   
  </table><br><br>
      <tr align="center">
         <el-button  @click="Cancel" style="width: 150px;height: 50px;"
         >取消</el-button>
  
  
      </tr>
   

  </div>
</template>
    
<script setup lang='ts'>
     import axios  from 'axios';
     import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

    import { ref, reactive, onMounted,watch } from 'vue'; 
    import { useRouter, useRoute } from 'vue-router';
    const route = useRoute();
    const router = useRouter();
    onMounted(() => {
      backfill()
    })
  
    const form=reactive({
        contractId:route.query.ContractId,
        contractTitle:'',
        unit:'',
        personCharge:'',
       contractNumber:'',
        contractType:'',
        dateofSigning:'',
        attn:'',
        contractAmount:'',
        contractNote:'',
        contractTerms:'',
        contractText:'',
        ccontractStatus:0,
        contractClassification:3
    })
  //反填
  const backfill = () => {
  axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: route.query.ContractId
        }
      }).then(res => {
      console.log(res.data.data)
        form.contractTitle = res.data.data.contractTitle
        form.unit = res.data.data.unit
        form.personCharge = res.data.data.personCharge
        form.contractNumber = res.data.data.contractNumber
        form.contractType = res.data.data.contractType
        form.dateofSigning = res.data.data.dateofSigning
        form.attn = res.data.data.attn
        form.contractAmount = res.data.data.contractAmount
        form.contractNote = res.data.data.contractNote
        form.contractTerms = res.data.data.contractTerms
        form.contractText = res.data.data.contractText
        form.ccontractStatus = res.data.data.ccontractStatus
        form.contractClassification = res.data.data.contractClassification
    })
    
  }


//取消
const Cancel=()=>{
  router.push('/ContractTshow')
}

</script>
    
<style>
    
</style>